<template>
	<view class="member_card">
		<!-- 缺省组件 -->
		<pageEmpty v-if="list.length == 0" text="暂无账号~"></pageEmpty>
		<view class="member_list">
			<view class="member_item" v-for="(item, index) in list " :key="index">
				<view class="top">
					<!-- <image class="head_img" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/vipHead.png" mode=""></image> -->
					<view class="center">
						<text>商家：{{ item.UserName }}</text>
						<text>昵称：{{ item.ShopName }}</text>
						<text>类型：<text :class="tem.ShopType ? 'on_line' : 'off_line'">{{ item.ShopType?'自营':'非自营' }}</text>
						</text>
						<text>账号：{{ item.LoginName }}</text>
						<text>密码：{{ item.Pwd }}</text>
						<text>分红：{{ item.Proportion || 0 }}%</text>
					</view>
					<view class="right">

					</view>
				</view>
				<view class="bottom" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="button">
						<text @click="showCode(item, index)">查看二维码</text>
					</view>
					<view class="button gray" @click="copy(index)">
						<text>复制信息</text>

					</view>
					<view class="button">
						<text @click="editInfo(item, index)">设置分成</text>
					</view>
					<!-- 					<view :class="['button',item.Status==0?'green':'gray']">
						<text v-if="item.Status==1">未启用</text>
						<text v-if="item.Status==-1">已禁用</text>
						<text v-if="item.Status==0">已启用</text>

					</view> -->
				</view>
				<view class="bottom" style="display: flex;align-items: center;justify-content: space-between;" v-if="item.ShopType == '自营'">
					<view class="button" @click="nav_to(`/pages/otherPage/priceMange?ShopID=${item.ShopID}&ShopType=非自营&ShopName=${item.ShopName}`)">
						<text>价格设置</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :safeAreaInsetBottom="false" :round="10" @close="show = false">
			<view class="login-container">
				<view class="login-box">
					<view class="input-group">
						<text class="label">昵称</text>
						<input class="input" v-model="UserName" placeholder="请输入昵称" />
					</view>
					<view class="input-group">
						<text class="label">手机号</text>
						<input class="input" v-model="Phone" type="number" maxlength="11" placeholder="请输入手机号" />
					</view>
					<!-- <view class="input-group">
						<text class="label">店铺地址</text>
						<input class="input" v-model="address" type="text" placeholder="请输入店铺地址" />
					</view> -->
					<view class="input-group">
						<text class="label">分红比例</text>
						<input class="input" v-model="Proportion" type="digit" placeholder="请输入分红比例" />
					</view>
					<view class="button" @click="enable">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showImage" mode="center" :safeAreaInsetBottom="false" :round="10" @close="showImage = false">
			<view class="img_container">
				<image class="img_box1" :src="shopInfo.QrCodeImg" mode=""></image>
				<view class="button_group">
					<button @click="savePic">保存图片</button>
					<button @click="drawCanvas">打印图片</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
// 缺省页
import pageEmpty from '@/components/pageEmpty/pageEmpty';
export default {
	components: {
		pageEmpty
	},
	data() {
		return {
			list: [],
			tabsActive: true,
			show: false,
			UserName: '',
			Phone: '',
			Proportion: '',
			point: '',
			selectIndex: '',
			id: '',
			showImage:false,
			shopInfo:{},
		};
	},
	methods: {
		showCode(e){
			this.shopInfo = e
			this.showImage = true
		},
		savePic() {
			let that = this
			let imgUrl = that.shopInfo.QrCodeImg || that.shopInfo.DaiLiImg
			uni.downloadFile({
				url: imgUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function () {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		},
		async drawCanvas() {
			let res = await this.$api.post('Action/QrPrint', {
				ShopID: this.shopInfo.ShopID,
				UrlImg: this.shopInfo.QrCodeImg
			})
			uni.showToast({
				title: "命令已发送",
				icon: "none"
			});

			this.showImage = false
			console.log(res);
		},
		copy(index) {
			console.log(this.list[index]);
			let text = `账号${this.list[index].LoginName},密码${this.list[index].Pwd}`
			uni.setClipboardData({
				data: text,
				success: function (res) {
					uni.getClipboardData({
						success: function (res) {
							uni.showToast({
								title: '已复制到剪贴板',
								icon: 'none'
							});
						}
					});
				},
				fail(err) {
					console.log(err);
				}
			});

		},
		async enable() {
			const {
				UserName,
				Phone,
				Proportion
			} = this;

			if (!UserName || !Phone || !Proportion) {
				return this.showToast('请完善账号信息');
			}

			const phoneRegex = /^[0-9]{10,15}$/;
			if (!phoneRegex.test(Phone)) {
				return this.showToast('请输入正确的手机号');
			}
			if (!isNaN(Proportion) && Proportion >= 1 && Proportion <= 100) {

			} else {
				return this.showToast('请输入正确的比例');; // 不是数字或不在范围内
			}


			const obj = this.list[this.selectIndex];
			const params = {
				ID: obj.ID,
				Proportion,
				UserName,
				Phone
			};

			try {
				const res = await this.$api.post('RevenueRecords/GetAccountActivation', params);

				if (res.data.IsSuccess) {
					obj.Status = 0;
					obj.Phone = Phone;
					obj.UserName = UserName;
					obj.Proportion = Proportion;
					this.show = false;
					this.showToast('修改成功');
				}
			} catch (error) {
				this.showToast('修改失败');
				console.error(error); // 可选，记录错误信息
			}
		},


		showToast(message) {
			uni.showToast({
				title: message,
				icon: 'none'
			});
		},

		editInfo(item, index) {
			this.selectIndex = index
			this.UserName = item.UserName
			this.Phone = item.Phone
			this.Proportion = item.Proportion
			this.show = true
			console.log(item);
			console.log(item.Phone);
		},
		async getList(id) {
			let res = await this.$api.post('RevenueRecords/GetAccountManagement', {
				ID: id
			})
			this.list = res.data
		}
	},
	onLoad(options) {
		console.log(options);
		if (options.ID) {
			this.id = options.ID
			this.getList(options.ID)
		}
	},


}
</script>
<style>
page {
	background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.copy {}

// 登录框容器
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
	width: 500rpx;
	// height: 500rpx;
	border-radius: 20rpx;
	box-sizing: content-box;
	padding: 50rpx 0;
}

// 登录框
.login-box {
	width: 90%;
	max-width: 600rpx;
	border-radius: 10rpx;
	// box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 标签
.label {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	text-align: left;
}

// 输入框容器
.input-group {
	width: 100%;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
}

// 输入框
.input {
	width: 100%;
	height: 60rpx;
	border: 1rpx solid #ddd;
	border-radius: 5rpx;
	font-size: 28rpx;
	color: #333;
}

// 按钮
.button {
	width: 100%;
	height: 60rpx;
	background-color: #3572fe;
	border: none;
	border-radius: 5rpx;
	color: #ffffff;
	font-size: 28rpx;
	// font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-top: 20rpx;


}

.green {
	background-color: #e5f8f2;

	text {
		color: #0ebe89;
	}
}

.gray {
	background-color: #f6f6f6;

	text {
		color: #7e7e7e;
	}
}

.button {

	width: 176rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #3572fe;

	text {
		color: #FFFFFF;
		// font-weight: bold;
		font-size: 28rpx;
	}

}

.bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	.id {
		font-size: 24rpx;
	}

	.green {
		background-color: #e5f8f2;

		text {
			color: #0ebe89;
		}
	}

	.gray {
		background-color: #f6f6f6;

		text {
			color: #7e7e7e;
		}
	}

	.button {

		width: 176rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			// font-weight: bold;
			font-size: 28rpx;
		}

	}

	.open {
		background: linear-gradient(130deg, #FBE7C8 0%, #D1AD79 100%);

		text {
			color: #543C24;
		}
	}

	.renew {
		background: linear-gradient(130deg, #535250 0%, #3C3934 100%);

		text {
			color: #EED8B0;
		}
	}

}

.member_text {
	text {
		color: #6B4C20;
	}
}

.nomember {
	text {
		color: #FFEBBC;
	}
}

.member_list {
	display: flex;
	flex-direction: column;

	.member_item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;

		.right {
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			text {
				font-size: 24rpx;
			}
		}

		.center {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			height: 100%;
			flex: 1;
			margin-left: 20rpx;
			text{
				margin-bottom: 10rpx;
			}
			// text{
			// 	&:nth-child(1){
			// 		font-weight: bold;
			// 		font-size: 32rpx;
			// 	}
			// 	&:nth-child(2){
			// 		font-size: 24rpx;
			// 	}
			// }
		}

		.top {
			display: flex;
			justify-content: space-between;

			.head_img {
				width: 80rpx;
				height: 80rpx;
			}
		}

		margin-bottom: 38rpx;
		width: 686rpx;
		// height: 328rpx;
		padding: 42rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			z-index: -1;
		}
	}
}

.member_card {
	padding: 32rpx;
}

.img_container {


	padding: 20rpx 0;
	width: 600rpx;
	height: 700rpx;
	border-radius: 20rpx;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	.img_box1 {
		width: 500rpx;
		height: 500rpx;
	}

	.button_group {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;

		button {
			width: 40%;
			background-color: #3572FE;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70rpx;
			border-radius: 10rpx;
			color: white;
			font-size: 28rpx
		}
	}
}
.off_line {
	width: 72rpx;
	height: 40rpx;
	background: #F6F6F6;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #666666;
	padding: 10rpx 12rpx;
}

.on_line {
	width: 72rpx;
	height: 40rpx;
	background: #E5F8F2;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #00BA82;
	padding: 10rpx 12rpx;
}
</style>